<template>
  <div class="lock-screen" @touchstart="startDrag" @mousedown="startDrag">
    <div class="background" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"></div>
    <div class="lock-overlay" v-if="!unlocked">
      <div class="text">
      <div class="arrow"></div>
        <span>上滑解锁</span>
        
      </div>
    </div>
    <div v-if="unlocked" class="unlock-message">解锁成功！</div>

    <!-- 雪花特效 -->
    <div class="snowflakes">
      <!-- 圆形雪花 -->
      <div class="circle-snowflakes" v-for="n in snowflakesCount" :key="'circle-' + n" :style="getCircleSnowflakeStyle()"></div>
      
      <!-- 字符雪花 -->
      <div class="char-snowflakes" v-for="n in snowflakesCount" :key="'char-' + n" :style="getCharSnowflakeStyle()">❄</div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

// 引入本地图片
import backgroundImage from '@/assets/images/newYear.png';

export default {
  setup() {
    const unlocked = ref(false); // 是否解锁
    const startY = ref(0); // 滑动起始位置
    const currentY = ref(0); // 当前滑动位置
    const unlockThreshold = ref(50); // 解锁所需的滑动距离（单位：px）
    const snowflakesCount = ref(50); // 雪花数量

    const router = useRouter();

    // 开始拖动
    const startDrag = (event) => {
      const touch = event.touches ? event.touches[0] : event; // 获取触摸或鼠标起始位置
      startY.value = touch.clientY;

      // 添加事件监听
      const moveHandler = (moveEvent) => moveSlider(moveEvent);
      const endHandler = () => endDrag(moveHandler, endHandler);

      document.addEventListener('mousemove', moveHandler);
      document.addEventListener('touchmove', moveHandler);
      document.addEventListener('mouseup', endHandler);
      document.addEventListener('touchend', endHandler);
    };

    // 移动滑动
    const moveSlider = (event) => {
      const touch = event.touches ? event.touches[0] : event;
      const deltaY = startY.value - touch.clientY; // 计算向上的滑动距离

      if (deltaY > 0) {
        currentY.value = deltaY;
      }
    };

    // 结束拖动
    const endDrag = (moveHandler, endHandler) => {
      document.removeEventListener('mousemove', moveHandler);
      document.removeEventListener('touchmove', moveHandler);
      document.removeEventListener('mouseup', endHandler);
      document.removeEventListener('touchend', endHandler);

      // 如果滑动距离超过阈值，解锁并跳转页面
      if (currentY.value >= unlockThreshold.value) {
        unlocked.value = true;
        router.push('/login'); // 跳转到下一个页面
      }
    };

    // 获取圆形雪花的样式
    const getCircleSnowflakeStyle = () => {
      const leftPosition = Math.random() * 100 + '%'; // 随机横向位置
      const animationDuration = Math.random() * 3 + 5 + 's'; // 随机动画时长
      const size = Math.random() * 5 + 5 + 'px'; // 随机雪花大小
      const animationDelay = Math.random() * 2 + 's'; // 随机延迟时间

      return {
        left: leftPosition,
        width: size,
        height: size,
        animationDuration: animationDuration,
        animationDelay: animationDelay,
      };
    };

    // 获取字符雪花的样式
    const getCharSnowflakeStyle = () => {
      const leftPosition = Math.random() * 100 + '%'; // 随机横向位置
      const animationDuration = Math.random() * 3 + 5 + 's'; // 随机动画时长
      const size = Math.random() * 5 + 5 + 'px'; // 随机雪花大小
      const animationDelay = Math.random() * 2 + 's'; // 随机延迟时间

      return {
        left: leftPosition,
        fontSize: '18px',
        animationDuration: animationDuration,
        animationDelay: animationDelay,
      };
    };

    return {
      unlocked,
      startDrag,
      backgroundImage,
      unlockThreshold,
      snowflakesCount,
      getCircleSnowflakeStyle,
      getCharSnowflakeStyle,
    };
  },
};
</script>

<style scoped>
.lock-screen {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /* background-color: black; */
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.lock-overlay {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: white;
}

.text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

.arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid rgba(255, 255, 255, 0.7);
  margin-top: 10px;
  animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

.unlock-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  font-weight: bold;
}

/* 雪花特效 */
.snowflakes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.circle-snowflakes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.circle-snowflakes {
  position: absolute;
  top: -10px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  opacity: 0;
  animation: snowCircle 10s linear infinite;
}

@keyframes snowCircle {
  0% {
    top: -10px;
    opacity: 0.8;
  }
  50% {
    top: 50vh;
    opacity: 0.5;
  }
  70% {
    top: 70vh;
    opacity: 0.3;
  }
  90% {
    top: 90vh;
    opacity: 0.1;
  }
  100% {
    top: 100vh;
    opacity: 0;
  }
}

.char-snowflakes{
  position: absolute;
  top: -10px;
  font-size: 18px;
  opacity: 0;
  color: rgba(255, 255, 255, 0.8);
  animation: snowChar 10s linear infinite;
}

@keyframes snowChar {
  0% {
    top: -10px;
    opacity: 0.8;
  }
  100% {
    top: 100vh;
    opacity: 0;
  }
}
</style>
